<html xmlns:th="http://www.thymeleaf.org">
<head th:include="layout :: htmlhead" th:with="title='favorites'"></head>
<body>
      <section>
         <div class="content-wrapper">
            <h3>私信我的</h3>
            <div class="row" id="letter" th:if="${letterList.size() > 0}">
               <div class="col-lg-9 col-md-9 mt">
                  <ul class="timeline" id="letterList">
                     <li th:each="letter : ${letterList}">
                        <div class="timeline-panel">
                           <div class="popover right">
                              <div class="popover-content">
                                 <div class="table-grid table-grid-align-middle mb">
                                    <div class="col col-xxs">
                                       <a href="javascript:void(0);" th:onclick="'locationUrl(\'/user/' + ${letter.sendUserId} + '/0\',\'\');'">
                                          <img th:src="${letter.profilePicture==null?'img/favicon.png':letter.profilePicture}" alt="" class="media-object img-circle thumb48" /> </a>
                                    </div>
                                    <div class="col">
                                       <p class="m0">
                                          <a href="javascript:void(0);" class="text-muted" th:onclick="'locationUrl(\'/user/' + ${letter.sendUserId} + '/0\',\'\');'">
                                             <strong class="send-user-name" th:text="${letter.sendUserName}">Smilence</strong>
                                          </a>
                                          <small class="ml">
                                             <span th:text="${letter.createTime}">2小时前</span>
                                             给我<span th:text="${letter.type == 'REPLY'?'回复':'发'}"></span>了私信
                                          </small>
                                       </p>
                                    </div>
                                    <div class="col text-right">
                                       <!--<div class="btn btn-default" data-toggle="modal" data-target="#modal-delete">删除</div>-->
                                       <!--<div class="btn btn-default" data-toggle="modal" data-target="#modal-revoke">撤销</div>-->
                                       <div class="btn btn-default btn-reply">回复</div>
                                    </div>
                                 </div>
                                 <p th:if="${letter.type == 'REPLY'}" th:text="'回复：' + ${letter.content}">这是其他人私信我的内容</p>
                                 <p th:if="${letter.type == 'ORIGINAL'}" th:text="${letter.content}">这是其他人私信我的内容</p>
                                 <div class="collapse">
                                    <div class="media">
                                       <div class="media-body">
                                          <form data-parsley-validate="true" onsubmit="return false">
                                             <div class="input-group">
                                                <input type="text" class="form-control" required="required" placeholder="输入回复..." />
                                                <span class="input-group-btn">
                                                   <button type="submit" th:onclick="'sendLetter(\'reply\',\''+${letter.id}+'\',this);'" class="btn btn-default" >发送</button>
                                                </span>
                                             </div>
                                          </form>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </li>
                  </ul>
                  <div id="loadingStandard" style="text-align:center;margin:20px;display:none;"><img src="/img/loading.gif" width="64" height="64" /></div>
               </div>
               <div class="col-lg-3 col-md-3"> </div>
            </div>
         </div>
      </section>
</body>
<script type='text/javascript' th:inline="javascript">
   $(function(){
      reload();
      var loadingFlag = true;
      $(window).scroll(function(){
         if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            if($("#letter").length >= 1){
               if(loadingFlag){
                  loadingFlag = false;
                  $('#loadingStandard').show();
                  loadMore();
                  $('#loadingStandard').hide();
                  loadingFlag = true;
               }
            }
         }
      });
   });
   function reload(){
      $(".timeline li").each(function(){
         var _this = $(this);
         _this.find(".table-grid .btn").click(function(){
            if(_this.find(".collapse").hasClass('in')){
               _this.find(".collapse").removeClass('in')
            }else{
               _this.find(".collapse").addClass('in')
               var rep = "@"+_this.find(".m0 .text-muted .send-user-name").html()+" ";
               _this.find(".form-control").focus().val(rep);
            }
         });
      });
   }
</script>
</html>